<script setup lang="ts">
import { computed } from 'vue';

import { LinkOutlined } from '@ant-design/icons-vue';

import { guanlianprdStore, indlyfor1688todystor } from '#/store';
import { copyToClipboard } from '#/utils';

const props = defineProps<{
  item?: any;
}>();

const indlyfor1688tody = indlyfor1688todystor();
const guanlianprd = guanlianprdStore();

const selectStatus = computed(() => {
  return indlyfor1688tody.selectProducts.includes(props.item.offerId);
});
const setSelectList = (e: any) => {
  if (e) {
    indlyfor1688tody.selectProducts.push(props.item.offerId);
  } else {
    indlyfor1688tody.selectProducts = indlyfor1688tody.selectProducts.filter(
      (item: any) => item !== props.item.offerId,
    );
  }
};
function goLickDetail(url: string) {
  window.open(url);
}

function guanlianghuoyuanItem(item: any) {
  guanlianprd.bindTo1688content(item);
  // bind1688Source({
  //   shopId: guanlianprd.shopData.shopId,
  //   productId: guanlianprd.selectImage,
  //   offerIds: [item.offerId],
  // }).then((res) => {
  //   if (res.code === 200) {
  //     message.success(`关联成功`);
  //   } else {
  //     message.error(`关联失败`);
  //   }
  // });
}
</script>

<template>
  <div
    :class="selectStatus ? 'border-amber-500' : ''"
    class="w-48 overflow-hidden rounded border border-gray-200 transition duration-150 hover:shadow-md"
  >
    <div class="relative" @click="goLickDetail(item.detailUrl)">
      <img
        :src="item.image"
        alt=""
        class="h-48 w-48 cursor-pointer object-cover"
      />
      <div v-if="0" class="absolute left-5 top-5">
        <a-checkbox
          v-model:checked="selectStatus"
          @change="(e: any) => setSelectList(e.target.checked)"
        />
      </div>
    </div>
    <a-space class="w-full px-2 py-2" direction="vertical">
      <div class="flex justify-between">
        <a-space :size="5">
          <span class="text-xs text-gray-500">进货价</span>
          <div class="text-base font-bold text-red-500">￥{{ item.price }}</div>
        </a-space>
        <a-space :size="5">
          <!-- <span class="text-xs text-gray-500">销量</span>
          <span class="text-ms text-red-500">{{ item.salesCnt90d }}</span> -->
        </a-space>
      </div>
      <div
        class="ellipsis-2 h-8 cursor-pointer"
        @click="goLickDetail(item.detailUrl)"
      >
        {{ item.subject }}
      </div>
      <div class="h-10">
        <a-space :size="4" align="start" class="mb-4 w-full" wrap>
          <a-tag v-for="tag in item.tags" :key="tag.code" color="blue">
            {{ tag.text }}
          </a-tag>
        </a-space>
      </div>
      <div class="flex justify-between pt-10">
        <a-button size="small" @click="() => copyToClipboard(item.detailUrl)">
          <template #icon>
            <LinkOutlined style="font-size: 12px" />
          </template>
          复制链接
        </a-button>
        <a-button
          size="small"
          type="primary"
          v-bindshop
          @click="guanlianghuoyuanItem(item)"
        >
          关联货源
        </a-button>
      </div>
    </a-space>
    <!-- <set-add-product-box
      v-if="showAddBox"
      v-model="showAddBox"
      :select-item-list="[item.offerId]"
    /> -->
  </div>
</template>

<style scoped>
.ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
